# Aulas de Ventosurf: Como Construir e Despachar Aplicações de Intelligence Artificial Passo a Passo Transcrições de: [Aulas de Ventosurf: Como Construir e Despachar Aplicações de Intelligence Artificial Passo a Passo | STEP-BY-STEP](https://www.youtube.com/watch?v=9eF51MGhOEk) (Idioma: en) Explicando aempto de 60 horas em aplicações de inteligência artificial utilizando o Ventosurf, posso dizer que é o melhor editor de código de inteligência artificial que conheço. Neste vídeo, vou mostrar em detalhes porquê isso é assim e apresentar vários exemplos de aplicações que construí, passo-a-passo da forma como constrói-as e de como podemos desparar as mesmas. Começará com um analisador de faturas simples. Permitir-lhe-á os utilisadores carregarem documentos e então selecionar todos os diferentes elementos que desejam extrair da fatura. Depois, terão a opção de baixar o dado extraído em ficheiros Json ou CSV. Depois, vamos passar pela meta e construir uma micro-aplicação de repurporção de conteúdo, completa com autenticação de utilizadores, integração básica, utilização de tokens, rastreio e também integrações de Stripe para pagamentos. Como também vamos ver como podemos realmente desparar estas aplicações para que sejam acessíveis a utilizadores para interagir. Finalmente, vou divulgar uma aplicação MVP que construí para um cliente, um mensageiro de tradução em tempo real, completa com autenticação de utilizadores, pesquisa e adição de contactos, mensagens em tempo real e tradução de cada mensagem. Também vou abordar as 10 melhores práticas e dicas que aprendi ao longo dos últimos alguns dias de trabalho com Ventosurf. Se é novo no canal, oi! Eu sou Ahmed. Fui engenheiro de máquina, agora sou engenheiro de inteligência gênera e fundador da Agenic AI, onde ajudamos empresas a implementar estas soluções e automatizações de inteligência generativa. Também tenho uma comunidade de escola onde compartilho todos os diferentes recursos, modelos e código para cada solução que compartilho. Também temos sessões semanais em que pessoas entram e pergunta diferentes questões e compartilham diferentes insights. Se isso parecer alguma coisa que se interesse, estará o primeiro link na descrição abaixo. Eu tenho criado este documento aqui com mais de 50 páginas de instruções passo-a-passo, todas as diferentes códigos e prompts que usei para construir estas diferentes aplicações. Passa por tudo, não só como usar o Ventosurf, mas também a configuração da SuperBase, a configuração da SuperBase, a configuração de Stripe e, para a primeira aplicação, como podemos configurar o Azure Document Intelligence para a extração de diferentes campos da fatura. Neste vídeo, vou começar pela Vimagens do Ventosurf e explicando como funciona, porquê deveríamos utilizar e porquê é o melhor, especialmente se você são proprietário de uma empresa que construi soluções genéricas para cliente. Vamos olhar todas as diferentes características do Ventosurf, os conceitos e capacidades e o que o diferencia dos outros editores de código de inteligência artificial disponíveis. Depois, vamos cobrir as instruções passo-a-passo de como construir aplicações, como o analisador de faturas, a micro-aplicação de repurporção de conteúdo e vamos desparar e hospedar uma das aplicações. Vou dar uma visão geral da aplicação cliente que construí, o mensageiro de tradução em tempo real e, por fim, vou abordar as práticas e dicas diferentes e insights únicos que aprendi ao usar Ventosurf nos últimos alguns dias. O que é este novo IDE que está tomando o espaço e revolucionando como trabalhamos com inteligência artificial e criar aplicações de layers? A empresa por detrás é chamada Codium, e eles já estão há uma boa quantidade de tempo. Inicialmente, eles começaram como um mero extension de conclusão de código que podia adicionar ao seu Código Visual Studio, por exemplo, e apenas lhe ajuda a escrever mais rápido. No entanto, agora eles lançaram o Ventosurf, o que é, em essência, a primeira IDE de código de inteligência artificial. Construíram isso em cima do Código Visual Studio porque o Código Visual Studio é open-source, então ele se visto muito semelhante ao Código Visual Studio, mas a back-end é potenciado por agentes e co-pilotos, e por isso eles trabalham e colaboram um com o outro. Isso é por isso que o Ventosurf é único. Eles lançaram o Cascade, que combina a compreensão profunda da base de código da sua antiga mangas de consciência e dá a ferramentas mais avançadas e consciência em tempo real das diferentes ações. Algumas das características que lhe tornam muito incomuns são: - Cria um experimento em que parece trabalhar ao lado de um desenvolvedor, colaborando num projeto - Mantém uma compreensão contínua das suas ações, então a cada atualização, ela também é actualizada - Tem a compreensão profunda da base inteira de código, utilizando a mangas de consciência develvida antes - Estão a utilizar os algoritmos de busca baseados no modelo de aprendizagem profunda No fundo têm algumas das vantagens para o experimento do desenvolvedor, e à direita têm as diferentes ferramentas e integrações por detrás. Até recentemente, o Ventosurf não tinha, na verdade, a capacidade de uploadar imagens, como pode fazer o Código Visual Studio, mas agora com a atualização mais recente, já lançaram isto, então agora podemos adicionar imagens e lhe dizer para avidez a UI, por exemplo, ou construir aplicações inteiras baseadas em imagens diferentes UIs que você gosta. Outra actualização interessante é a do Anthropic, onde eles estão introduzindo um protocolo de contexto de modelos, basicamente, é uma nova norma para ligar artificial inteligência a diferentes repositórios de conteúdo, ferramentas comerciais e ambientes de desenvolvimento, e isto deverá melhorar o resultado dos modelos, especialmente quando se refere a geração de código. Já him partnershiped com o Ventosurf, então começaremos a ver as melhorias em breve. Comemorando, temos o analisador de faturas e o analisador de documentos, então vamos primeiramente ver um ação, vamos mostrar, por favor, vamos ver uma visão, antes de saltarmos e entender como construir-os passo a passo. Inicialmente temos uma aplicação muito simples aqui, e podemos carregar facsimile de faturas de PDF aqui. Aqui eu tenho um exemplo de fatura de PDF, carregamos esta aqui, então já temos uma vista multi-página, podemos parecer e ver a fatura que carregamos, então sobre a barra lateral direita aqui temos definir os diferentes campos que queremos extrair. Aqui, simplesmente ficaremos com a extracção de três variáveis diferentes: temos o nome do cliente, o nome do fornecedor, o subtotal e vamos ver se faz isso bem. Na parte posterior, estamos a analisar o PDF de fluxo de documentos, a extração de todas as entidades, podemos ver que o nome do cliente é Business Test, isso está correto; o nome do fornecedor é Fatura de Slice, isso também está correto; e então o subtotal é 85 Dólares, isso também está correto. Em seguida, podem estar a descarregar os dados como o ficheiro Json ou o ficheiro CSV, e simplesmente clicando em Guard pode salvar-nos nossos ficheiros como pode ver. É muito simples, no entanto, algo como isso pode levar semanas para construir se fizermos de zero, enquanto com alguma coisa como o Ventosurf estão a conseguir ter algo como isso em horas, aí. como passou de uma forma simples, vamos passar a um passo, construir a micro-aplicação de repurporção de conteúdo, completa com autenticação de utilizadores, integração com o Super Base, utilização de tokens, rastreio e também integração com Stripe para pagamentos. Além disso, vamos ver como podemos realmente desparar essas aplicações para que sejam acessíveis a utilizadores para interagir. Finalmente, vou mostrar uma aplicação MVP que constrúi para um cliente, um mensageiro de tradução em tempo real, completa com autenticação de utilizadores, pesquisa e adição de contactos, mensagens em tempo real e tradução de cada mensagem. Também vou cobrir as 10 melhores práticas e dicas diferentes e insights únicos que aprendi ao utilizar Ventosurf nos últimos alguns dias. Se for novo na palavra, oi! Eu sou Ahmed. Sou engenheiro de máquina, agora sou engenheiro de inteligência generativa e fundador da Agenic AI, onde ajudamos empresas a implementar estas soluções e automatizações de inteligência generativa. Também tenho uma comunidade de escola onde compartilho todos os diferentes recursos, modelos e código para cada solução que compartilho. Também temos sessões semanais em que pessoas entram e pergunta diferentes questões e compartilham diferentes insights. Se isso parecer alguma coisa que se interesse, está na descrição abaixo. Eu tenho criado este documento aqui com mais de 50 páginas de instruções passo-a-passo, todas as diferentes códigos e prompts que usei para construir estas diferentes aplicações. Passa por tudo, não só como usar o Ventosurf, mas também a configuração da SuperBase, a configuração da SuperBase, a configuração de Stripe e, para a primeira aplicação, como podemos configurar o Azure Document Intelligence para a extração de diferentes campos da fatura. Neste vídeo, vou começar pela visão do Ventosurf e explicando como funciona, porquê deveríamos utilizar e porquê é o melhor, especialmente se você são proprietário de uma empresa que constrói soluções genéricas para cliente. Vamos olhar todas as diferentes características do Ventosurf, os conceitos e capacidades e o que o diferencia dos outros editores de código disponíveis. Depois, vamos cobrir as instruções passo-a-passo de como construir aplicações, como o analisador de faturas, a micro-aplicação de repurporção de conteúdo e vamos desparar e hospedarmos uma das aplicações. Vou dar uma visão geral da aplicação cliente que construí, o mensageiro de tradução em tempo real e, por fim, vou abordar as práticas e dicas diferentes e insigts únicos que aprendi ao utilizar Ventosurf nos últimos alguns dias. O que é este novo IDE que está tomando o espaço e revolucionando como trabalhamos com inteligência artificial e criar aplicações de layers? A empresa por detrás é chamada Codium, e eles já estão há uma boa quantidade de tempo. Inicialmente, eles começaram como um mero extension de conclusão de código que podia adicionar ao seu Código Visual Studio, por exemplo, e apenas lhe ajuda a escrever mais rápido. No entanto, agora eles lançaram o Ventosurf, o que é, em essência, a primeira IDE de código de inteligência artificial. Construíram isso em cima do Código Visual Studio porque o Código Visual Studio é open-source, então ele se visto muito semelhante ao Código Visual Studio, mas a back-end é potenciado por agentes e co-pilotos, e por isso eles trabalham e colaboram um com o outro. Isso é por isso que o Ventosurf é único. Eles lançaram o Cascade, que combina a compreensão profunda da base de código da sua antiga mangas de consciência e dá a ferramentas mais avançadas e consciência em tempo real das diferentes ações. Algumas das características que lhe tornam muito incomuns são: - Cria um experimento em que parece trabalhar ao lado de um desenvolvedor, colaborando num projeto - Mantém uma compreensão contínua das suas ações, então a cada atualização, ela também é actualizada - Tem a compreensão profunda da base inteira de código, utilizando a mangas de consciência develvida antes - Estão a utilizar os algoritmos de busca baseados no modelo de aprendizagem profunda No fundo, tem algumas das vantagens para o experimento do desenvolvedor, e à direita têm as diferentes ferramentas e integrações por detrás. atualmente, o Ventosurf não tinha, na verdade, a capacidade de uploadar imagens, como pode fazer o Código Visual Studio, mas agora com a atualização mais recente, já lançaram isto, então agora podemos adicionar imagens e lhe dizer para avidez a UI, por exemplo, ou construir aplicações inteiras baseadas em imagens diferentes UIs que você gosta. Outra actualização interessante é a do Anthropic, onde eles estão introduzindo um protocolo de contexto de modelos, basicamente, é uma nova norma para ligar artificial inteligência a diferentes repositórios de conteúdo, ferramentas comerciais e ambientes de desenvolvimento, e isto deverá melhorar o resultado dos modelos, especialmente quando se refere a geração de código. Já tenho parceira com o Ventosurf, então começaremos a ver as melhorias em breve. Comemorando, temos o analisador de faturas e o analisador de documentos, então vamos primeiramente ver um ação, vamos mostrar, por favor, vamos ver uma visão, antes de saltarmos e entender como construir-os passo a passo. Inicialmente temos uma aplicação muito simples aqui, e podemos carregar facsimile de faturas de PDF aqui. Aqui eu tenho um exemplo de fatura de PDF, carregamos esta aqui, então já temos uma vista multi-página, podemos parecer e ver a fatura que carregamos, então sobre a barra lateral direita aqui temos definir os diferentes campos que queremos extrair. Aqui, simplesmente ficaremos com a extracção de três variáveis diferentes: temos o nome do cliente, o nome do fornecedor, o subtotal e vamos ver se faz isso bem. Na parte posterior, estamos a analisar o PDF de fluxo de documentos, a extração de todas as entidades, podemos ver que o nome do cliente é Business Test, o nome do fornecedor é Fatura de Slice, oisso está correto; e então o subtotal é 85 Dólares, isso também está correto. Em seguida, podem estar a descarregar os dados como o ficheiro Json ou o ficheiro CSV, e simplesmente clicando em Guard pode salvar-nos nossos ficheiros como pode ver. É muito simples, no entanto, algo como isso pode levar semanas para construir se fizermos de zero, enquanto com alguma coisa como o Ventosurf estão a conseguir ter algo como isso em horas, aí. Depois de uma forma simples, vamos passar pela meta e construirmos uma micro-aplicação completa de repurporção de conteúdo, pois mais que reaproveitamento conteúdo. Em seguida, fazemos a integração básica, autenticação de utilizadores e máquinas de árvore grande que permite que os utilizadores ajamenguem enviar uma solicitação de preenchimento. Agora passamos para o API Key Table e Programação de Solicitações Gráficas, onde nós só precisamos configurar as variáveis para fazer auth com a plataforma do Frontend. Será, por exemplo, se é possível para eles fazer visualizações diretamente da nossa plataforma de gerenciamento de dados e manipulá-los com facilidade. Dentro de API Key agora, primeiro fazemos a criação das chaves, onde usam as chaves para pegar acesso à plataforma. Agora quando passamos para a ferramenta de GraphQL fornecida com frontend, vamos precisar de apenas mais além das chaves de acesso da nossa plataforma de gerenciamento de dados. Nós receberemos uma chave de API, que vamos usar aqui para autorizar acesso à nossas funcionalidades de gerenciamento de dados da nossa empresa. E por último nós configuraremos a pré-visualização da entities da nossa empresa como nós queremos que sejam mostradas à frente do Frontend. Após adicionarmos as chaves de acesso, configurarmos o acesso ao GrafQL e pré-visualizações das nossas entidades, encontraremos-se com uma micro-aplicação de repurporção de conteúdo pronta para funcionar e ser utilizada em qualquer Frontend. Pelo motivo das práticas e das boas-vindas recebidas, fizemos a integração com a plataforma de gerenciamento de envios de email Mailchimp, onde é uma plataforma bem conhecida para construir envios de email, para captura de email de subscriber e para análise de inscrições de emails e de subscribers, como aparência, envio e otimização de múltiplos mailchimp em tempo real. Em seguida integramos o SDK de autenticação Comprehensive que lhe permite a configuração de auth básica em qualquer aplicação web, com essa lib au já com o back-end, conseguiu ter um auth loja em 15 linhas de código. Depois integramos o SDK de envio de pedidos e do Freelancer Edge, com essa lib já com o back-end, conseguimos adicionar a máquina de árvore grande, woo couriers, rua cartas gratuitas, Subscribe2eSports, que já carregam mais todo fornecedor para nós. Com o SDK de envio de pedidos instalado, você pode implementar as APIs de envio de emails em qualquer aplicação web sem escrever código extra, por exemplo: ou para configurar um envio de emails, ou para recuperar todas as inscrições de emails e os envios de email que foram feitos. Aí finalmente há o Backpress, uma ferramenta em cima do Laravel PHP para visualizar e gerir seu banco dados já que o Backpress é uma perna menos de extender todo o código de administração de banco rápida e fácil, é uma excelente ferramenta para trabalhar com bancos de dados MySQL, SQLite e PostgreSQL. Concluindo, é uma ótima ferramenta para fazer depuração, pesquisar de erros e na manutenção dos seus telemetria, esquema de manutenção e webooks para perceber os problema das suas aplicações de fácil e rápida. Grátis de PKP, é uma extensão integrada ao Código Visual Studio, que vegeta analisando o código em powerediling na-line, isso acontece quando passamos por um codigo e você quer esperar se está errado dentro de 60 segundos, então a PKP vai fazer isso indo analisar essas linhas parecidas com o que há do python vanilla, por exemplo, se você estiver fazendo parte de um loop, ela vai adivinhar-lhe porque este loop não está funcionando corretamente, então uma excelente ferramenta para vemos se está de cometas, algo que deixa a vida de desentender código em powering-lang tão mais fácil. Finalmente, aprendemos a configurar de pre-definida para TR, Facebook, Google e GitHub, onde é o comportamento predeterminado que você utilizaria para configurar este particular em Frontend, com este configuadícelas, poderá ter todas as funções em um único lado. Aqui com badges, por exemplo, é um componente JavaScript que funciona mais como uma outra função no navegador que conecta essas diferentes redes externas, com ele você conta visitantes, quantos ‘Clics’ o site teve, a quantidade de inscrições de um evento, a compartilhação em redes sociais e métricas como Likes, Views ou Shares por meio da api de redes sociais. Com este tópico de hoje, aprendemos de algumas das melhores práticas e dicas que os locais de Frontend estão usando de fato. Em seguida, aprendemos, para fasso todos os conhecimentos de Frontend pode ser facilitado com os LowCode / NoCode frameworks em cima. Aqui especialmente mencionei da Zapier e de AppGini, que são as mais conhecidas na área, especialmente que o Zapier oferece 1. 5 destaques gratis de forma inicial. Nesse tópico também mostramos como poderia conectar diferentes aplicações de forma fácil, desde as APIs complexas, como a do Twitter ou do Facebook, até mesmo, como poderia armazenar 'Clicks' simples das suas páginas e então processar isso com qualquer aplicação ou site que desejar. # Visão Geral e Funcionalidades Principais Nosso aplicativo utiliza o NextJS v15, Tailwind CSS e ícones Lucid no desenvolvimento. Então, criamos um ficheiro de instruções que é essential para a nossa actividade pois continuamos a referir-nos a ele enquanto estamos a construir a aplicação. Este ficheiro de instruções produz um ficheiro Markdown que resume a visão geral do projeto, as suas funcionalidades principais e características desejadas. Os recursos deste ficheiro são a sua acumulação progressiva e a sua organização, o que ajudam a dividir a aplicação, permitindo-nos concentrarmos-nos em uma funcionalidade a uma vez, garantindo a teste adequado e em seguida avançando com funcionalidades adicionais. Esta lista contém: 1. Descrições para cada funcionalidade 2. Passos detalhados para implementação 3. Especificações de layout 4. Ações do utilizador e as suas possibilidades 5. Requisitos de texto para cada funcionalidade específica 6. Códigos de exemplo para cada serviço ## Notas Importantes de Implementação 1. Copie o ficheiro Markdown para a pasta apropriada. 2. Abra o ficheiro em Wind Surf e abra a pasta utilizando "Arquivo > Abrir Pasta". 3. Selecione a pasta criada via terminal. ### Guia Passo a Passo 1. Crie um novo `instructions. MD` ficheiro na pasta raiz. 2. Cole o seu conteúdo do ficheiro copiado na ficheiro recém-criado. **Nota: ** - O resultado gerado pelo GPT personalizado pode não ser perfeito. É fortemente recomendado passar o maior tempo possível neste documento para garantir que todas as funcionalidades e passos estão precisos, devidamente atualizados e em ordem desejada. - Pode-se inserir códigos de exemplo dos documentos dos serviços que utilizamos nas seções correspondentes do ficheiro de instruções. - Quando o documento estiver concluído, podemos começar a desenvolver a aplicação NextJS. ## Exemplo: Inteligência de Documentos no Azure ### Descrição: A Inteligência de Documentos do Azure é um serviço que processa documentos para extrair dados. ### Implementação: 1. Escreva uma breve descrição de o que ele é e o que ele faz. 2. Copie o código exato provido na Documentação de Inteligência de Documentos no Azure. ### Vantagens: 1. A melhora da saída do modelo mediante a redução de erros. 2. Melhorar as chances de sucesso sem manipulação de erro e depuração prolongada. 3. Fornecer um esquema pronto para a invóice como referência, melhorando a precisão com que o modelo extrai dados do documento. Assim que tiver terminado o ficheiro de instruções, pode começar a construir a sua aplicação NextJS seguindo estes passos: 1. Chate com Cascade utilizando o painel de navegação de direita (por favor utilize o comando l ou o l ctrl como opção de acedência rápida). 2. Descreva o aplicativo de análise de ficheiros PDF de facturas, extratividade de dados, upload de utilizadores e visualização dos dados extraídos. 3. Adapte o modelo para seguir as instruções baseadas no ficheiro de instruções. md. 4. Ligue o pedido e garanta que o modelo lê e executa conforme determinado. Quando trabalhar em cada funcionalidade, não hesite a testar o conteúdo gerado, garantindo que tudo corre corretamente antes de aceitar o código que está fornecendo Cascade. Quando concluído, fixe as modificações e publique-as em GitHub como um checkpoint finalmente. Por último, crie uma nova janela de chat sempre que a sua janela de contexto fica demasiado comprida para manter o desempenho do modelo óptimo. # Documentação - Melhoria na Interface de Usuário e Implementação da Terceira Função ## Melhoria na Interface de Usuário Agora que implementamos a funcionalidade de upload de imagens, vamos melhorar a Interface de Usuário (UI) antes de avançarmos. Aqui estão as etapas que fizemos: 1. **Melhorar a UI**: A atual UI é terrible e queremos melhorá-la antes de adicionar várias funcionalidades, pois pode se tornar desagradável outra vez de outra forma. 2. **Garantir a Funcionalidade**: Enquanto atualizamos a UI, garantiremos que a funcionalidade existente não sofrerá alteração. ### Verificando as Tarefas Concluídas Verifique as tarefas que foram concluídas para garantir que só alterações de UI são necessárias e não de funcionalidade. - Análise da parte da UI do código para garantir que foi modificada. - Verificar que apenas a parte da UI do código foi modificada e que a funcionalidade permanece inalterada. ## Terceira Função - Extracção de Dados com Inteligência de Documentos de Edo Agora que as primeiras duas funcionalidades foram implementadas, vamos avançar para a terceira funcionalidade - Extracção de Dados com Inteligência de Documentos de Edo. ### Configuração da API - Configurar uma rota de API para se comunicar com Azure. - Incluir uma rota de API para obter os resultados de extração. - Implementar tratamento de erros. ### Criação dos Arquivos - Criar todos os arquivos necessários para a Extracção de Dados. - Adicionar as chaves e segredos de ambiente necessários para armazená-las. - Instalar as bibliotecas necessárias para a Extracção de Dados. ### Executações em Execução e Carrega-se Letra de Boas-Vindas - Utilizar um carregador de spinner para o progresso da Extração de Dados. - Incluir um botão para executar a Extração de Dados. ## Quarta Função Final - Baixar Dados A última funcionalidade a ser implementada será a capacidade de baixar os dados em formatos CSV e JSON. - Adicionar um botão para baixar o formato escolhido. - Utilizar BLOB e URL create object URL para as funções de download. Quando concluídas estas etapas, podemos personalizar a UI, adicionar um logotipo e estilizar a aplicação como desejado. Com estas melhorias e novas funcionalidades, a aplicação será mais amigável ao usuário e robusta. Continuemos a construir e a testar para garantir que tudo funciona como esperado. # Utilizando Este Artigo para Posts em Redes Sociais Este artigo é utilizado para gerar esse conteúdo e podemos eliminar esse para ter o conteúdo aqui. Pode ver que é realmente bom e extenso, mas não vou lê-lo. De fato, ele tem tudo que queremos e a ideia aqui é que não nos importamos com o artigo (embora possamos utilizar o artigo se quiseres, por exemplo, para um blog, se quiseres criar um blog para o website). Em vez disso, queremos utilizar os artigos para posts em redes sociais. Aqui, temos um menu desplegável com todos os artigos que geramos, que é carregado a partir da Superbase. Quanto um artigo for gerado, é salvo na base de dados da Superbase, e depois este menu desplegável puxa todas as diferentes cerca das artigos que geramos. Escolhemos um artigo e aqui definimos o tipo de post que queremos criar: - `dicas e truques`: Concepção para resolução de problemas, estilo de escrita de destaque, ensino - `destaque`: Estilo básico, informativo - `anúncio`: Estilo profissional, informativo Entraremos no Twitter: Neste exemplo, temos o conteúdo que podemos copiar: ``` Temos gerado um artigo lindo para você! 🎉 Confira-o [aqui](https://example.com/artigo) 📝 ``` Agora, tentemos um post no LinkedIn: ``` Confira nosso artigo mais recente aqui: [link-de-exemplo-do-LinkedIn](link-de-exemplo-do-LinkedIn) 🚨📝 ``` E aqui temos os tokens que usamos para gerá-los: Pode ver a página de configuração no fundo, e nesta é onde realmente acontece a magia. Aqui podemos ver todos os diferentes Tokens e os tokens disponíveis restantes: - Quando um novo utilizador se regista, tem 10, 000 tokens de gratuito, e já usamos 5, 000. - Pode ver como muitos compraram. - Quando comprarmos tokens, podemos ver a barra mostrando-nos como doamos em comparação ao número de tokens que compramos. - Aqui embaixo, podemos ver os diferentes pacotes: - $5 por 50, 000 token - $15 por 250, 000 tokens - $40 por 2, 000, 000 tokens Pode clicar em "Comprar" e isso deveria levá-nos para a página de pagamento da Stripe. Excelente! Estamos na página da Stripe agora. Aqui podemos ver o modo de teste para motivos claros. Dessa forma, entramos aqui com as informações e depois podemos clicar "Pagar" para que esta seja processada. Incrivelmente, deveríamos redirecionar de volta para nossa página de definições. Temos uma conta bem-sucedida, e podemos ver agora: `Pagamento bem-sucedido, os tokens foram adicionados para a sua conta`. Agora temos um total de 54, 000 tokens. Tentaremos o "Ultra" apenas por motivo de demonstração: - Agora temos 2, 000, 000 tokens. Também temos um botão de logout, mas não pode estar a ver isso. A esquerda, tem o botão de logout e apertando-o está a levar-nos de regresso para a página de iniciar sessão. Agora tem uma idéia das funcionalidades da aplicação e da sua capacidade. Agora vamos realmente entrar em detalhe de como chegamos à esta fase e passar pelos diferentes passos para isso, pois é um pouco mais complexo. Não vou realmente estar a construir de novo, mas vou levá-lo por todos os diferentes passos que tive que faze para desenvolver isso: 1. Começamos com o prompt writer Wind Sur comum. O promoti eu desta vez com um texto promovido mais detalhado porque eu queria realmente garantir que capturassem todos os diferentes detalhes, especialmente quando falamos do formulário de inscrição. Em seguida, disse-lhe sobre as diferentes guias: - Persona - Artigo - Rede Social - Configuração 2. De seguida, veio o prompt de instruções, o qual posso mostrar-lhe. Aqui clinicha o ficheiro de instruções finais e pode ver como está separado em todas as diferentes funcionalidades. Vou explicar isso à vista segundas. 3. Começamos com o resumo da aplicação, garantindo o uso do modelo LLM de Anthropic, integração com a Superbase, formulário de inscrição para a empresa, configuração da empresa, pessoa, geração de artigos, e posts em redes sociais, e também gerado com base de tokens e gerenciado e registrado, e integração de pagamento com a Stripe. 4. Vamos passar e explicar todas as diferentes funcionalidades e como estou tendo-as esclarecido: - Autenticação e Armazenamento com Superbase: Totalmente necessário garantir que isso esteja a ser definido a partir do princípio para poder construir o resto das funcionalidades com tudo no lugar a correto. - Aba de Persona: Aqui mostramos a pessoa da que o utilizador introduziu durante o processo de inscrição onde ele pode modificar os dados preenchidos inicialmente e é conectado com a Superbase para que possa modificar diferentes partes e salvar o cinto de volta para o banco de dados. - Aba de Artigos: Mandou a criar uma nova página de artigo e todos os diferentes campos de inserção e lista desplegável, asegurando que eu utilize dois da API do entropicCLM para gerar os campos. - Geração de Artigos: Puxa os artigos previamente gerados da lista desplegável e lhe permite selecionar um artigo, definir as preferências do post, e clicar em "Gerar" para gerar o post. - Gestão de Tokens: Acompanhar o uso dos tokens e mostrar a balance do utilizador na página de definições. - Integração da Stripe: Permite aos utilizadores comprar tokens adicionais através da Stripe. ``` # Configuração de Web Hook do Stripe para Desenvolvimento Local ## Introdução Este guia vai guiá-lo através da configuração de um ponto de extremidade de web hook dentro do Stripe para desenvolvimento local. Inicialmente, vamos resumir os passos para configurar o ponto de extremidade de web hook no painel de controle do Stripe e em seguida vai oferecer guias sobre como lidar com o desenvolvimento local para este ponto de extremidade. ## Pré-requisitos 1. Familiaridade com as APIs do Stripe 2. Ter o interface de linha de comandos do Stripe (CLI) instalado ## Passos para Configurar um Ponto de Extremidade de Web Hook no Stripe 1. Navegue pelo painel de controle do Stripe e certifique-se de que a sua conta esteja em modo de teste. 2. Vá para a seção de **Desenvolvedores > Web Hooks**. 3. Clique em **ADICIONAR PONTO DE EXTREMIDADE** para adicionar um novo ponto de extremidade. 4. Dê um nome ao ponto de extremidade, a tenção é que seja uma URL pública (por exemplo, `socialscribe. com`). 5. Selecione o evento que deseja ouvir, tais como `checkout. session. completed`. 6. Verifique se a versão corresponde à que você está usando. 7. Clique em **ADICIONAR PONTO DE EXTREMIDADE**, e receberá a chave secreta do webhook. ## Configuração de Desenvolvimento Local 1. Em um setup Mac, instale o CLI do Stripe com o comando `brew install stripe`. 2. Autentique utilizando o seguinte comando no seu prompt de comando, o qual lhe levará para a página web do Stripe para o logon. 3. Para encaminhar o web hook para a URL localhost, utilize o seguinte código: ``` stripe listen --forward seu_ endpoint_url /events ``` ## Boas Práticas - Mantenha o comando de web hook executando durante a construção e a execução da aplicação. - Certifique-se de copiar e corrigir os erros de TipoScript e problemas que possam surgir durante o desenvolvimento. - Comite mudanças frequentemente no repositório. - Quando tudo for testado e funcionar, implante a aplicação. ## Implantação da Aplicação 1. Execute o seguinte comando para construir a aplicação: ``` mpm run build ``` 2. Quando o processo de construção estiver concluído e verificado para garantir que não há erros, está pronto para implantar. 3. Escolha seu serviço de implantação preferido, como o Railway ou o Vercel, e siga as suas instruções de implantação. Assim é que owns! Com esses passos, está pronto para implantar a sua aplicação com Stripe habilitada. Upon request, I can also provide guidance on setting up Stripe for localhost testing. For more information, refer to the [instructions file](instructions. md). # Documentação Técnica - Plataforma de Mensagens em Mobile A transmissão de mensagens é extremamente rápida nesta plataforma. Os usuários receberão as mensagens de forma instantânea, o que foi paramounto, já que é uma plataforma de mensagens para a UI. O tempo foi gasto para garantir que a interface seja consistentemente mobile-friendly. Uma clara separação entre mensagens enviadas e recibidas é necessária para manter a interface limpa. É importante passar um tempo para garantir que a interface seja consistente ao longo da plataforma. Para referência, podemos encontrar a documentação na seção sobre a documentação. Abaixo, há um snippet do documento da documentação para nos mostrar um exemplo de como isso pode ser implementado. Esse é o prompt de sistema que foi utilizado: "Você é tradutor especializado em traduzir do idioma do usuário para o do outro usuário. Traduza a seguinte mensagem e retorne somente a tradução". Esta funcionalidade funcionou muito bem. Depois veio a lista de contato, portanto, há a página onde os usuários podem pesquisar, como mostrado, e adicionar outros usuários. É possível enviar um pedido de amizade, aceitar o pedido e iniciar conversas. Ele foi bem fácil e direto. Utilizando Tailwind para a UI, recuperar e exibir usuários cadastrados no Superbase e implementar a funcionalidade de pesquisa e inicialização de conversas foram também recursos fáceis de implementar. Ao enviar mensagens, elas são enviadas para o modelo Openi e uma resposta é retornada. Encontraremos mais referências para o modelo de chat na documentação. É importante notar que a maioria dessas funcionalidades foram criadas em uma feature anterior. No entanto, sempre é importante construir em cima do trabalho anterior e garantir que ele foi feito da maneira correta. Nós sempre pedimos para referir-nos às instruções antes de fazer qualquer outra alteração. Por fim, foi otimizado para a Mobile e garantido que a interface seja consistente e selecionável entre as telas diferentes no seu aplicativo. É muito simples quando você trabalha com plataformas como Wov, Cursor, Bolt ou outras, há sempre a possibilidade de erros. Alguns conceitos que vamos abordar aqui poderão parecer simples ou não necessários, mas eles realmente fazem a diferença. 1. Certifique-se de ter uma instrução clara e bem definida e que seja consultada frequentemente durante a construção do projeto para que a modelo seja consciente do contexto do projeto. Se a janela de chat se tornar muito louva, ela começa a esquecer do que o projeto é sobre e esquece seu contexto, o que pode causar problemas não desejados. 2. Divida as funcionalidades de acordo com o que idealmente devem ser concluídas antes que ocorra a integralidade do aplicativo. Isso evita ter que levantar muitas ideias por várias vezes, uma por linha. 3. Coloque snippets de documentação nas instruções na sua interface, isso melhora a precisão do modelo ao escolher a versão correta de uma biblioteca. 4. Dividir a janela de chat, garantindo que novas conversas sejam iniciadas com as instruções reiniciadas. 5. Certifique-se de que sua aplicação esteja em execução permanentemente para testar e verificar se as novas funcionalidades se encaixam corretamente antes de fazer alterações irrecuperáveis. 6. Use a funcionalidade de upload de imagem que foi recentemente lançada para fins de depuração. Pode mostrar uma interface que desejamos e pedir para que o modelo construa algo semelhante. 7. Aceite parcialmente as alterações do modelo e reveja as alterações feitas. Alterarções não desejadas podem ser rejeitadas. Isto pode economizar um grande tempo. 8. Para quaisquer atualizações menores ao código, adicione uma mensagem no final do prompt. Isso ajuda desde que outros arquivos não sejam alterados. 9. Após a conclusão de cada recurso, verifique se ele funciona corretamente e, em seguida, faça o commit do código para os seus repositórios. Isso é uma espécie de verificação de seletor de estado do aplicativo, o que grupo pode voltar para o estado seguro caso algo ainda queira ser alterado. 10. Em alguns casos, ele pode estar conectado a problemas inexplicáveis e parecer como se você ainda estivesse travado e pedindo ao criador para corrigir o problema. Em alguns casos, pode ser necessário referir-se novamente ao modelo BERT 01 e solicitar ajuda para resolver o problema. Essa é a lista de práticas recomendadas e dicas de como construir um aplicativo com sucesso em Wiv. Se exceder algumas horas construindo aplicativos com Wov, é muito provável que encontre algum erro com ele. Vamos abordar alguns conceitos esclarecedores que ficam em dúvida se são necessários ou não, mas eles realmente fazem a diferença. ## O que é `Wiv`? Wiv é uma plataforma de construção de aplicativos utilizando inteligência artificial avançada. É fácil construir aplicativos visuais modernos, gerar códigos relativamente próximos da qualidade de um programa de desenvolvimento realizado por um humano e permitir que você tenha uma opção cada vez melhor no mercado. ## Conclusão Espero que você tenha encontrado as dicas aqui úteis para que consiga construir um aplicativo de qualidade com Wiv. Pelos anos que já passamos construindo aplicativos com ele, tenho muita experiência com a plataforma e espero que essas dicas encaminhem você em uma direção de sucesso. Não apenas aprendibas sobre o processo de construção de aplicativos, também podemos introduzir métodos de teste válidos e stretches de código que garantem a funcionalidade desejada. 